<!--
 * @FilePath: /fxfzywpt/src/components/OlMap/index.vue
 * @Description: 
-->
<template>
  <div>
    <div class="map-container" ref="mapContainer" id="map-container"></div>
    <!--南海小地图-->
    <SouthChinaSeaMap
      v-show="props.showSouthSea"
      :southSeaMapId="props.southSeaMapId"
      :styles="props.sourchSeaStyles"
      :zoom="props.sourchSeaZoom"
    ></SouthChinaSeaMap>
    <slot name="popup"></slot>
  </div>
</template>
<script setup name="OlMap">
import { ref, reactive, defineProps } from 'vue';
import { getChinaBasePromise, getChinaBaseProvinceLayer, getTiandituVecMap, getTiandituVecText, getTiandituImgMap, getTiandituDemMap } from '@/map/projMap.js';

import Map from 'ol/Map';
import View from 'ol/View';
import { DoubleClickZoom, PinchZoom, MouseWheelZoom, DragPan } from 'ol/interaction';
import TileLayer from 'ol/layer/Tile';
import * as control from 'ol/control';
import { TileSuperMapRest, Logo, QueryByGeometryParameters, QueryService } from '@supermap/iclient-ol';
import VectorLayer from 'ol/layer/Vector';
import { OSM, Vector as VectorSource } from 'ol/source';
import WKT from 'ol/format/WKT';
import { boundingExtent } from 'ol/extent';
import { Fill, Stroke, Style, Icon, Circle as CircleStyle, Text } from 'ol/style';
import { fromLonLat } from 'ol/proj';
import SouthChinaSeaMap from '@/map/components/southChinaSeaMap/index.vue';

const props = defineProps({
  showSouthSea: {
    type: Boolean,
    default: true,
  },
  sourchSeaZoom: {
    type: Number,
    default: 3,
  },
  sourchSeaStyles: {
    required: false,
    type: Object,
    default: {},
  },
  southSeaMapId: {
    type: String,
    default: 'southChinaSeaMap',
  },
  blueChina: {
    type: Boolean,
    default: true,
  },
  showTianditu: {//显示天地图街道图
    type: Boolean,
    default: false,
  },
  mapLayer: {
    type: [Array, Object],
    default: null,
  },
  refId: { type: String, default: 'Container' },
  center: { type: Array, default: () => [105, 25.5] },
  zoom: { type: Number, default: 4 },
  minZoom: { type: Number, default: 4 },
  maxZoom: { type: Number, default: 14 },
  constrainResolution: { type: Boolean, default: true },
  //放大缩小
  zoomDisable: {
    type: Boolean,
    default: true,
  },
  //双击放大缩小
  doubleZoomDisable: {
    type: Boolean,
    default: false,
  },
  //拖拽
  dragPanDisable: {
    type: Boolean,
    default: true,
  },
  //捏合缩放
  pinchZoomDisable: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(['getMap', 'mapClick']);
defineExpose({
  showChinaBaseMapLayer,
  showTiandituImgMapLayer,
  showDemMapLayer,
  showTiandituVecMapLayer,
});
const mapContainer = ref(null);
const map = ref(null);
watch(
  () => props.refId,
  (newId) => {
    if (newId) {
      // 更新地图容器的引用
      mapContainer.value = document.getElementById('map' + newId);
      // 重新初始化地图
      initMap();
    }
  }
);
onUnmounted(() => {
  map.value = null;
}),
  onMounted(() => {
    console.log('初始化地图');
    initMap();
  });
function initMap() {
  console.log("initMap");
  if (!mapContainer.value) {
    mapContainer.value = 'mapContainer';
  }
  console.log(mapContainer.value);
  // window.onresize = autodivheight();
  map.value = new Map({
    target: mapContainer.value,
    view: new View({
      center: props.center,
      maxZoom: props.maxZoom,
      minZoom: props.minZoom,
      zoom: props.zoom,
      constrainResolution: props.constrainResolution,
      smoothResolutionConstraint: false,
      projection: 'EPSG:4490',
    }),
  });
  if (props.blueChina) {
    initChinaBaseMapService();
  }
  console.log(props.showTianditu);
  if (props.showTianditu) {
    initTiandituVecMapService();
  }
  let { mapLayer } = props;
  if (mapLayer) {
    if (isObject(mapLayer)) {
      map.value.addLayer(mapLayer);
    } else if (isArray(mapLayer)) {
      mapLayer.forEach((item) => {
        map.value.addLayer(item);
      });
    }
  }
  // disableDragInteraction(map);
  setupSelectInteraction(map);
  emits('getMap', map);
}
const disableDragInteraction = (mapInstance) => {
  if (mapInstance.value) {
    mapInstance.value.getInteractions().forEach((interaction) => {
      if (interaction instanceof MouseWheelZoom) {
        interaction.setActive(props.zoomDisable);
      }
      if (interaction instanceof DoubleClickZoom) {
        interaction.setActive(props.doubleZoomDisable);
      }
      if (interaction instanceof DragPan) {
        interaction.setActive(props.dragPanDisable);
      }
      if (interaction instanceof PinchZoom) {
        interaction.setActive(props.pinchZoomDisable);
      }
    });
  }
};
const setupSelectInteraction = (mapInstance) => {
  // 监听地图的点击事件
  mapInstance.value.on('click', (event) => {
    emits('mapClick', event);
  });
};
function initChinaBaseMapService() {
  if (!map.value) {
    return;
  }

  getChinaBasePromise(map).then((result) => {
    map.value.addLayer(result);
    // emits('getMap', map);
  });
  // getChinaBaseProvinceLayer(map.value);
}
function initTiandituVecMapService() {
  if (!map.value) {
    return;
  }
  console.log("initTianditu");
  let layer = getTiandituVecMap();
  map.value.addLayer(layer);
  layer.set('id', 'china_tianditu_vec');
  layer.setZIndex(0);
  let layer1 = getTiandituVecText();
  map.value.addLayer(layer1);
  layer1.set('id', 'china_tianditu_vec_text');
  layer1.setZIndex(0);
}
function initTiandituImgMapService() {
  if (!map.value) {
    return;
  }

  let layer = getTiandituImgMap();
  map.value.addLayer(layer);
  layer.set('id', 'china_tianditu_img');
  layer.setZIndex(0);
}
function initTiandituDemMapService() {
  if (!map.value) {
    return;
  }

  let layer = getTiandituDemMap();
  map.value.addLayer(layer);
  layer.set('id', 'china_demtu');
  layer.setZIndex(0);
}

function showChinaBaseMapLayer() {
  if (!map.value) {
    return;
  }

  let layers = map.value.getLayers();
  let isCreate = false;
  layers.forEach((layer) => {
    if (layer.get('id') == 'china_blue') {
      layer.setVisible(true);
      isCreate = true;
    }
    if (layer.get('id') == 'china_tianditu_vec_img' || layer.get('id') == 'china_tianditu_vec_text') {
      layer.setVisible(false);
    }
    if (layer.get('id') == 'china_tianditu_img') {
      layer.setVisible(false);
    }
    if (layer.get('id') == 'china_demtu') {
      layer.setVisible(false);
    }
  });

  if (!isCreate) {
    initChinaBaseMapService();
  }
}
function showTiandituVecMapLayer() {
  if (!map.value) {
    return;
  }

  let layers = map.value.getLayers();
  let isCreate = false;
  layers.forEach((layer) => {
    if (layer.get('id') == 'china_tianditu_vec_img') {
      layer.setVisible(true);
      isCreate = true;
    }
    if (layer.get('id') == 'china_tianditu_vec_text') {
      layer.setVisible(true);
    }
    if (layer.get('id') == 'china_tianditu_img') {
      layer.setVisible(false);
    }
    if (layer.get('id') == 'china_blue') {
      layer.setVisible(false);
    }
    if (layer.get('id') == 'china_demtu') {
      layer.setVisible(false);
    }
  });

  if (!isCreate) {
    initTiandituVecMapService();
  }
}
function showTiandituImgMapLayer() {
  if (!map.value) {
    return;
  }

  let layers = map.value.getLayers();
  let isCreate = false;
  layers.forEach((layer) => {
    if (layer.get('id') == 'china_tianditu_img') {
      layer.setVisible(true);
      isCreate = true;
    }
    if (layer.get('id') == 'china_tianditu_vec_img' || layer.get('id') == 'china_tianditu_vec_text') {
      layer.setVisible(false);
    }
    if (layer.get('id') == 'china_blue') {
      layer.setVisible(false);
    }
    if (layer.get('id') == 'china_demtu') {
      layer.setVisible(false);
    }
  });

  if (!isCreate) {
    initTiandituImgMapService();
  }
}
function showDemMapLayer() {
  if (!map.value) {
    return;
  }

  let layers = map.value.getLayers();
  let isCreate = false;
  layers.forEach((layer) => {
    if (layer.get('id') == 'china_demtu') {
      layer.setVisible(true);
      isCreate = true;
    }
    if (layer.get('id') == 'china_blue') {
      layer.setVisible(false);
    }
    if (layer.get('id') == 'china_tianditu_img') {
      layer.setVisible(false);
    }
    if (layer.get('id') == 'china_tianditu_vec_img' || layer.get('id') == 'china_tianditu_vec_text') {
      layer.setVisible(false);
    }
  });

  if (!isCreate) {
    initTiandituDemMapService();
  }
}

function isObject(mapLayer) {
  return typeof mapLayer === 'object' && !Array.isArray(mapLayer);
}
function isArray(mapLayer) {
  return Array.isArray(mapLayer);
}
</script>
<style scoped lang="scss">
.map-container {
  width: 100%;
  height: 100%;
}
/* .southChinaSeaMapDiv {
  position: absolute;
  bottom: 210px;
  right: 55px;
  height: 0.78125rem;
  width: 0.625rem;
  border: 2px solid #057bc1;
  background: #07114b;
} */
</style>
